<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index_nav.css">
    <link rel="stylesheet" href="../iconfont/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/list_of_page.css">
</head>

<body>
    <!-- 首页导航栏 -->
    <nav class="index_nav">
        <div class="index_nav_center">
            <ul class="left_nav">
                <li class="first_menu_li">
                    <i class="fa fa-home"></i>
                    <a class="first_menu" href="../html/index.html">
                        返回首页
                    </a>
                </li>
                <li class="first_menu_li">
                    <a class="first_menu" href="">
                        网站导航
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="left_nav_secont_menu site_map">
                        <li class="close">
                            <i class=" fa fa-close"></i>
                        </li>
                        <li>
                            <dl>
                                <dt>特色购物</dt>
                                <dd>
                                    <p>
                                        <a href="">苏宁互联</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁达人</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁卡</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁国际</a>
                                    </p>
                                    <p>
                                        <a href="">易回收</a>
                                    </p>
                                    <p>
                                        <a href="">二手优品</a>
                                    </p>
                                    <p>
                                        <a href="">领券中心</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁Outlets</a>
                                    </p>
                                    <p>
                                        <a href="">导购指南</a>
                                    </p>
                                    <p>
                                        <a href="">江苏馆</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>主题频道</dt>
                                <dd>
                                    <p>
                                        <a href="">电器城</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁超市</a>
                                    </p>
                                    <p>
                                        <a href="">手机</a>
                                    </p>
                                    <p>
                                        <a href="">运动馆</a>
                                    </p>
                                    <p>
                                        <a href="">图书</a>
                                    </p>
                                    <p>
                                        <a href="">红孩子母婴</a>
                                    </p>
                                    <p>
                                        <a href="">美妆个护</a>
                                    </p>
                                    <p>
                                        <a href="">电脑</a>
                                    </p>
                                    <p>
                                        <a href="">服装城</a>
                                    </p>
                                    <p>
                                        <a href="">智能生活</a>
                                    </p>
                                    <p>
                                        <a href="">家装馆</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁汽车</a>
                                    </p>
                                    <p>
                                        <a href="">排行榜</a>
                                    </p>
                                    <p>
                                        <a href="">医药馆</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>生活助手</dt>
                                <dd>
                                    <p>
                                        <a href="">零钱宝</a>
                                    </p>
                                    <p>
                                        <a href="">手机充值</a>
                                    </p>
                                    <p>
                                        <a href="">转账还款</a>
                                    </p>
                                    <p>
                                        <a href="">约服务</a>
                                    </p>
                                    <p>
                                        <a href="">水电煤</a>
                                    </p>
                                    <p>
                                        <a href="">保险</a>
                                    </p>
                                    <p>
                                        <a href="">机票</a>
                                    </p>
                                    <p>
                                        <a href="">酒店</a>
                                    </p>
                                    <p>
                                        <a href="">工业品</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>会员联盟</dt>
                                <dd>
                                    <p>
                                        <a href="">会员联盟</a>
                                    </p>
                                    <p>
                                        <a href="">延长保修</a>
                                    </p>
                                    <p>
                                        <a href="">易付宝</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁理财</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁金融</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>更多热点</dt>
                                <dd>
                                    <p>
                                        <a href="">PP视频</a>
                                    </p>
                                    <p>
                                        <a href="">合作招商</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁联盟</a>
                                    </p>
                                    <p>
                                        <a href="">用户体验</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁云</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁足球</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁公益</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁有货</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="first_menu_li">
                    <a class="first_menu" href="">
                        商家入驻
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="left_nav_secont_menu tenants">
                        <li class="spical_shop">
                            <dl>
                                <dd>
                                    <p>
                                        <a href="">合作招商</a>
                                    </p>
                                    <p>
                                        <a href="">服务市场</a>
                                    </p>
                                    <p>
                                        <a href="">金融中心</a>
                                    </p>
                                    <p>
                                        <a href="">培训中心</a>
                                    </p>
                                    <p>
                                        <a href="">易通天下</a>
                                    </p>
                                    <p>
                                        <a href="">规则中心</a>
                                    </p>
                                    <p>
                                        <a href="">规则众议院</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="first_menu_li">
                    <a class="first_menu" href="">
                        客户服务
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="left_nav_secont_menu customer_service">
                        <li class="spical_shop">
                            <dl>
                                <dd>
                                    <p>
                                        <a href="">苏宁帮客</a>
                                    </p>
                                    <p>
                                        <a href="">帮助中心</a>
                                    </p>
                                    <p>
                                        <a href="">退换/维修</a>
                                    </p>
                                    <p>
                                        <a href="">意见反馈</a>
                                    </p>
                                    <p>
                                        <a href="">30天包退</a>
                                    </p>
                                    <p>
                                        <a href="">省心购</a>
                                    </p>
                                    <p>
                                        <a href="">在线咨询</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>

            </ul>
            <ul class="right_nav">
                <li class="common_nav_li right_nav_li please_login">
                    <a class="right_nav_word please_replace_login" href="../html/login.html">
                        请登录
                    </a>
                </li>
                <li class="common_nav_li nav_imp right_nav_li please_register">
                    <a class="right_nav_word " href="">
                        注册有礼
                    </a>
                </li>
                <li class="right_nav_li">
                    <a class="right_nav_word" href="">
                        我的订单
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="right_nav_secont_menu my_order">
                        <li>
                            <dl>
                                <dd>
                                    <p>
                                        <a href="">待支付</a>
                                    </p>
                                    <p>
                                        <a href="">待收货</a>
                                    </p>
                                    <p>
                                        <a href="">待评价</a>
                                    </p>
                                    <p>
                                        <a href="">修改订单</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="right_nav_li">
                    <a class="right_nav_word" href="">
                        我的易购
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="right_nav_secont_menu easy_buy">
                        <li>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/tool-logo.png" alt="">
                                    </p>
                                    <a href="">请登录</a>
                                </dt>
                                <dd>
                                    <p>
                                        <a href="">我的消息</a>
                                    </p>
                                    <p>
                                        <a href="">我的关注</a>
                                    </p>
                                    <p>
                                        <a href="">我的金融</a>
                                    </p>
                                    <p>
                                        <a href="">苏宁会员</a>
                                    </p>
                                    <p>
                                        <a href="">我的任性付</a>
                                    </p>
                                    <p>
                                        <a href="">我的优惠券</a>
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
                <li class="common_nav_li right_nav_li">
                    <a class="right_nav_word" href="">
                        苏宁会员
                    </a>
                </li>
                <li class="nav_imp shop_car right_nav_li">
                    <a class="right_nav_word" href="">
                        <i class="fa fa-shopping-cart"></i>
                        购物车
                        <span>0</span>
                        <i class="fa fa-angle-down"></i>
                        <ul class="right_nav_secont_menu shop_car shop_car_menu">
                            <li>
                                <dl>
                                    <dt>
                                        <p>
                                            <img src="../img/shop_car.png" alt="">
                                        </p>
                                    </dt>
                                    <dd class="shop_car_first_line">
                                        不要让您的购物车空着哦，快去逛逛吧
                                    </dd>
                                    <dd class="shop_car_second_line">
                                        如果您已添加过宝贝，那就赶紧登录查看吧
                                    </dd>
                                    <dd class="login_btn">
                                        <span>登录</span>
                                    </dd>
                                </dl>
                            </li>
                        </ul>
                    </a>
                </li>
                <li class="common_nav_li right_nav_li">
                    <a class="right_nav_word" href="">
                        易付宝
                    </a>
                </li>
                <li class="common_nav_li right_nav_li">
                    <a class="right_nav_word" href="">
                        企业采购
                    </a>
                </li>
                <li class="right_nav_li">
                    <a class="right_nav_word" href="">
                        手机苏宁
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="right_nav_secont_menu mobile_suning">
                        <li>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        扫一扫
                                    </p>
                                    <p>
                                        下载苏宁易购APP
                                    </p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        关注苏宁推客公众号
                                    </p>
                                    <p>
                                        自购省钱·分享赚钱
                                    </p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        扫一扫
                                    </p>
                                    <p>
                                        下载苏宁金融APP
                                    </p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <p>
                                        <img src="../img/sn_download.jpg" alt="">
                                    </p>
                                </dt>
                                <dd>
                                    <p>
                                        扫一扫
                                    </p>
                                    <p>
                                        关注苏宁易购服务号
                                    </p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 详情页第二导航栏 -->
    <div class="list_of_page_nav">
        <div class="list_of_page_center">
            <div class="page_nav_left">
                <div class="page_logo">
                    <img src="../img/nmpsLogo.png" alt="">
                </div>
                <div class="left_wrapper">
                    <a href="../html/index.html" class="page_active">首页</a>
                    <a href="" class="page_sec_nav">品牌惠</a>
                </div>
            </div>
            <div class="page_nav_right">
               <img src="../img/page_nav_right.png" alt="">
            </div>
        </div>
    </div>

    <!-- 详情页分类 -->
    <div class="list_of_page_type">
        <ul class="page_type_center">
            <li class="active">精选</li>
            <li>服饰鞋包</li>
            <li>家居</li>
            <li>酒水乳饮</li>
            <li>母婴</li>
            <li>生鲜</li>
            <li>大家电</li>
            <li>厨卫</li>
            <li>医药保健</li>
            <li>食品</li>
            <li>数码</li>
            <li>纸品洗护</li>
            <li>电脑办公</li>
            <li>小家电</li>
            <li>汽车用品</li>
            <li>家装</li>
            <li>美妆</li>
            <li>手机</li>
            <li>运动健美</li>
            <li>家纺百货</li>
            <li>二手优品</li>
        </ul>
    </div>

    <!-- 详情页排序 -->
    <div class="list_of_page_sort">
        <div class="list_of_page_sort_center">
            <div class="sort_wrapper">
                <span class="active">默认</span>
                <span>
                    销量
                    <i class="fa fa-sort"></i>
                </span>
                <span>
                    价格
                    <i class="fa fa-sort"></i>
                </span>
                <span class="new_today">
                    <input type="checkbox" name="" id="">
                    今日上新
                </span>
                <span>
                    <input type="checkbox" name="" id="">
                    苏宁服务
                </span>
            </div>
        </div>
    </div>

    <!-- 详情页商品列表 -->
    <section class="list_of_goods_list">
        <div class="goods_list_center">
            <div class="goods_content">
                <div class="goods_img">
                    <img src="http://image1.suning.cn/uimg/nmps/MBLSPZT/10089584810971678602picH_1_260x260.jpg" alt="">
                </div>
                <div class="goods_name">
                    Apple AirPods (配充电盒)
                </div>
                <div class="goods_desc">
                    满990元减111元
                </div>
                <div class="goods_price_btn">
                    <div class="price_desc">
                        <div class="sale_price">
                            <div class="now_price">
                                <i>￥</i>
                                <span>999</span>
                            </div>
                            <div class="old_price">
                                <i>￥</i>
                                <span>1999</span>
                            </div>
                        </div>
                        <div class="lowest_price_num">
                            <div class="lowest_icon">

                            </div>
                            <div class="lowest_type">
                                20天最低价
                                <b>|</b>
                            </div>
                            <div class="sale_num">
                                已抢487
                            </div>
                        </div>
                       
                    </div>
                    <div class="buy_btn">
                        立即抢购
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="../js/libs/jQuery.min.js"></script>
    <script src="../js/list_of_page.js"></script>
</body>

</html>